import styled from "styled-components";

const AuthFlowStyle = styled.div`
  position: absolute;
  bottom: 18%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: white;
  text-align: center;
  transition: right, left 0.35s ease-in-out;

  .adm-list-body,
  .adm-list-item {
    color: white !important;
    background-color: transparent;
    border: none;

    input::placeholder {
      font-size: 14px;
      letter-spacing: 0.1em;
    }

    .adm-list-item-content {
      border-bottom: 1px solid #cccaca;
    }

    .adm-form-item-label,
    .adm-input-element {
      color: white !important;
    }

    .adm-input-clear {
      position: absolute;
      right: 5px;
    }
  }

  .register {
    position: absolute;
    right: 0;
    bottom: 9vh;
    color: #4d3be0;
  }

  .adm-list-item-content-prefix {
    width: 20vw;
  }

  .submit {
    margin: 50px auto 0;
    width: 80%;
    background-color: var(--themeColor1);
    border: none;
    color: white;
  }
`;

export default AuthFlowStyle;
